<template>
	<view class="home">		
		<scroll-view scroll-x class="navscroll">
			<view class="item"
			 :class="navIndex==index?'active':''"
			 v-for="(item,index) in topbar" 
			 @click="Navtopbar(index,item.id)"
			>{{item.classname}}</view>			
		</scroll-view>
		
		<view class="content" >
			<div class="row" v-for="item in contentlist" >
				<newsbox :item="item" @click.native="gotoDetail(item.id)"></newsbox>
			</div>
		</view>
		
		<view class="nodata" v-if="!this.contentlist.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		
		<view class="loading" v-if="contentlist.length">			
			<view v-if="this.loading==1">数据加载中...</view>
			<view v-if="this.loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			cid:50,
			topbar:[],
			navIndex:0,
			contentlist:[],
			page:1,
			loading:0
			}
		},
		onLoad() {
			this.gettopbarlist()
			this.getcontentlist()
		},
		onShow(){
		},
		onReachBottom(){
			this.loading=1
			this.page++
			this.getcontentlist()
		},
		
		methods: {
			gotoDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${this.cid}&id=${item}`
				})
			},
			Navtopbar(index,id){
				this.navIndex=index
				this.cid=id
				this.page=1
				this.contentlist=[]
				this.getcontentlist()
			},
			gettopbarlist(){
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/navlist.php',
				 success: (res) => {
				        // console.log(res);
						this.topbar=res.data
						uni.hideLoading()
				    }
				})
			},
			getcontentlist(){
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/newslist.php', 
					data:{
						cid:this.cid,
						num:5,
						page:this.page
					},
				 success: (res) => {
				        // console.log(res);
						if(res.data.length==0){
							this.loading=2
						}
						this.contentlist=[...this.contentlist,...res.data]
						uni.hideLoading()
				    }
				})
			}
	}
}
</script>

<style lang="scss" scoped>
.navscroll{
	height: 100rpx;
	background: #F7F8FA;
	white-space: nowrap;
	position: fixed;
	top:var(--window-top);
	left:0;
	z-index: 10;
	/deep/ ::-webkit-scrollbar {
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding:0 30rpx;
		color:#333;		
		&.active{
			color:#31C27C;
		}
	}
}

.content{
	padding:30rpx;
	padding-top:130rpx;	
	.row{
		border-bottom:1px dotted #efefef;
		padding:20rpx 0;
	}
}
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	color:#888;
	line-height: 2em;
}
</style>
